<!DOCTYPE HTML>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-product-add">
			<div class="form-group">
				<label class="col-sm-3 control-label">规则编码<span style="color:red;">*</span>：</label>
				<div class="col-sm-8">
					<select id="ruleCode"  name="ruleCode" class="form-control"  th:with="type=${@dict.getType('GRAYSCALE_RULE')}">
						<option value="1"> --请选择-- </option>
						<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:description="${dict.extData2}" th:data="${dict.extData}" ></option>
					</select>
				</div>
			</div>
			<div class="form-group" style="display: none" id ="showKey">
				<label class="col-sm-3 control-label">入参KEY<span style="color:red;">*</span>：</label>
				<div class="col-sm-8">
					<input id="ruleKey" name="ruleKey" class="form-control" type="text">
				</div>
			</div>

			<div class="form-group">
				<label class="col-sm-3 control-label">参数VALUE<span style="color:red;">*</span>：</label>
				<div class="col-sm-8">
					<textarea id="ruleValue" name="ruleValue" class="form-control"  rows="5" maxlength="800"></textarea>
				</div>
			</div>

			<div class="form-group" >
				<label class="col-sm-3 control-label">规则举例：</label>
				<div class="col-sm-8">
					  <span  id ="example" name ="example" ></span>
				</div>
			</div>
			<input type="hidden" id="appCode" name="appCode" th:value="*{appCode}">
			<input type="hidden" id="interfaceCode" name="interfaceCode" th:value="*{interfaceCode}">
		</form>
	</div>
    <div th:include="include::footer"></div>
    <script type="text/javascript">
		$(function () {

		})

		$("#ruleCode").change(function() {
			var needParameterKey = $(this).find("option:selected").attr("data");
			var description = $(this).find("option:selected").attr("description");
			$("#example").html(description)
			if (eval(needParameterKey) == true) {
				$('#showKey').show();
			}else{
				$('#showKey').hide();
			}
		});


		var prefix = ctx+"functionRule"
		$("#form-product-add").validate({
			rules:{
				ruleCode:{
					required:true,
				},
				ruleKey:{
					required:true,
				},
				ruleValue:{
					required:true,
				},
			}
		});
		
		function submitHandler() {
	        if ($.validate.form()) {
	            $.operate.save(prefix + "/add", $('#form-product-add').serialize());
	        }
	    }
	</script>
</body>
</html>
